<template>
  <div v-loading="isloading" class="fenleicontainer">
    <!-- <div v-if="role=='区县用户'">
        <div class="header vm" >
            <div> <i class="el-icon-d-arrow-right"></i>村庄规划质量提升文件上传(<span class="el-upload__tip" slot="tip">1次只能上传1个xls/pdf文件</span>)</div>
            <el-button
                type="success"
                icon="el-icon-download"
                @click="downloadExcel"
                >下载工作台账模板</el-button
            >
        </div>
        <div class="button-box">
            <el-upload class="upload-demo" action="" :file-list="excel" :http-request="ledgerExcelUp" :limit="1" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
                <el-button type="primary" icon="el-icon-link" :limit="1" plain>上传村庄规划质量提升工作台账(excel)</el-button>
            </el-upload>
            <el-upload class="upload-demo" action="" :file-list="tzpdf" :http-request="ledgerPDFUp" :limit="1" accept=".pdf">
                <el-button type="success" icon="el-icon-link">上传村庄规划质量提升工作台账(pdf)</el-button>
            </el-upload>

        </div>
        <div class="button-box">
            <el-upload class="upload-demo" action="" :file-list="bgpdf" :http-request="reportUp" :limit="1" accept=".pdf">
                <el-button type="warning" icon="el-icon-link" plain>上传村庄规划质量评估报告(pdf)</el-button>
            </el-upload>
            <el-upload class="upload-demo" action="" :file-list="mmpdf" :http-request="multifilesUp" accept=".pdf">
                <el-button type="success" icon="el-icon-link" style="margin-left: 32px;" plain>上传重点村村庄规划质量评估表(pdf 可多选)</el-button>
            </el-upload>
        </div>
        <div style="float: right;margin-bottom: 20px;">
            <el-button type="danger" icon="el-icon-link" @click="submitFiles()">确定上传</el-button>
        </div>

    </div> -->

    <div class="header">
      <i class="el-icon-d-arrow-right"></i>村庄规划质量提升工作上报记录
    </div>
    <el-table :data="tableData" border style="width: 100%" class="eltable">
      <el-table-column label="序号" width="100" prop="id">
        <template slot-scope="{ $index }">
          <span>{{ $index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="upload" label="更新时间" width="180" />
      <el-table-column prop="area" label="上传人区县" width="180" />
      <el-table-column prop="excel" label="工作台账excel">
        <template slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            content="查看工作台账excel"
            placement="bottom"
          >
            <a :href="getfile(scope.row.excel)" download
              ><i class="iconfont icon-shebei"></i
            ></a>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="tzpdf" label="工作台账pdf" width="200">
        <template slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            content="查看工作台账pdf"
            placement="bottom"
          >
            <a :href="getfile(scope.row.tzpdf)" download
              ><i class="iconfont icon-hetong"></i
            ></a>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="bgpdf" label="质量评估报告pdf">
        <template slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            content="查看质量评估报告pdf"
            placement="bottom"
          >
            <a :href="getfile(scope.row.bgpdf)" download
              ><i class="iconfont icon-shebei"></i
            ></a>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="重点村村庄规划质量评估表（pdf）">
        <template slot-scope="scope">
          <div v-if="scope.row.mmpdf && scope.row.mmpdf.split(',').length > 0">
            <el-tooltip
              class="item"
              effect="dark"
              placement="bottom"
              v-for="item in scope.row.mmpdf.split(',')"
              :key="item"
              :content="item"
            >
              <a :href="getfile(item)" download
                ><i class="iconfont icon-shebei"></i
              ></a>
            </el-tooltip>
          </div>
          <div v-else>暂无记录</div>
        </template>
      </el-table-column>
      <el-table-column
        label="操作 "
        width="400"
        fixed="right"
        v-if="role == '区县用户'"
      >
        <template scope="scope">
          <el-button
            class="uploadbtn"
            type="danger"
            size="mini"
            @click="openpdf1(scope.row)"
            plain
            ><i class="el-icon-plus"></i>更新台账pdf</el-button
          >
          <el-button
            class="uploadbtn"
            type="danger"
            size="mini"
            @click="openpdf2(scope.row)"
            plain
            ><i class="el-icon-plus"></i>更新质量评估报告pdf</el-button
          >
          <el-button
            class="uploadbtn"
            type="danger"
            size="mini"
            @click="zhuijiaOpen(scope.row)"
            plain
            ><i class="el-icon-plus"></i>追加</el-button
          >
          <!-- <el-button type="danger" size="mini" @click="updateExcel(scope.row)" plain><i class="el-icon-plus"></i>更新台账</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="tableData.length > 0"
      class="elpagi"
      :total="total"
      @size-change="getData"
      @current-change="getData"
      @prev-click="getData"
      @next-click="getData"
      :current-page.sync="listquery.currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size.sync="listquery.pageSize"
      layout="total,sizes, prev, pager, next, jumper"
    />
    <el-dialog
      title="追加重点村村庄规划质量评估表"
      :visible.sync="isDialogShow"
      width="400px"
      :append-to-body="true"
      class="dialog1"
    >
      <el-upload
        class="upload-demo"
        action=""
        :http-request="zhuijiaUp"
        accept=".pdf"
        :file-list="zhuijiafile"
      >
        <el-button
          disabled
          type="success"
          icon="el-icon-link"
          style="margin-left: 32px"
          plain
          >上传重点村村庄规划质量评估表(pdf)</el-button
        >
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isDialogShow = false">取 消</el-button>
        <el-button type="primary" @click="zhuijia">提交</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="更新村庄规划质量提升台账（excel）"
      :visible.sync="isDialogShow1"
      width="400px"
      :append-to-body="true"
      class="dialog1"
    >
      <el-upload
        class="upload-demo"
        action=""
        :file-list="upexcel"
        :http-request="ledgerExcelUp1"
        :limit="1"
        accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
      >
        <el-button type="primary" icon="el-icon-link" :limit="1" plain
          >上传村庄规划质量提升工作台账(excel)</el-button
        >
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isDialogShow1 = false">取 消</el-button>
        <el-button type="primary" @click="updatetaizhang">提交</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="更新村庄规划质量提升台账（pdf）"
      :visible.sync="isDialogShow2"
      width="400px"
      :append-to-body="true"
      class="dialog1"
    >
      <el-upload
        class="upload-demo"
        action=""
        :file-list="pdf1"
        :http-request="ledgerExcelUp2"
        :limit="1"
        accept=".pdf"
      >
        <el-button disabled type="primary" icon="el-icon-link" :limit="1" plain
          >上传村庄规划质量提升台账（pdf）</el-button
        >
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isDialogShow2 = false">取 消</el-button>
        <el-button type="primary" @click="updatepdf1">提交</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="更新质量评估报告（pdf）"
      :visible.sync="isDialogShow3"
      width="400px"
      :append-to-body="true"
      class="dialog1"
    >
      <el-upload
        class="upload-demo"
        action=""
        :file-list="pdf2"
        :http-request="ledgerExcelUp3"
        :limit="1"
        accept=".pdf"
      >
        <el-button disabled type="primary" icon="el-icon-link" :limit="1" plain
          >上传质量评估报告（pdf）</el-button
        >
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isDialogShow3 = false">取 消</el-button>
        <el-button type="primary" @click="updatepdf2">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { apply, getlist, uploadmmpdf, uploadexcel } from "@/api/uprecord.js";
import { picHost } from "@/settings.js";
import openMixin from "@/mixins/open.js";
export default {
  data() {
    return {
      tableData: [],
      isloading: false,
      excel: [],
      upexcel: [],
      tzpdf: [],
      bgpdf: [],
      mmpdf: [],
      pdf1: [],
      pdf2: [],
      zhuijiafile: [],
      listquery: {
        pageSize: 10,
        currentPage: 1,
        type: "cc",
      },
      total: 0,
      role: "",
      isDialogShow: false,
      isDialogShow1: false,
      isDialogShow2: false,
      isDialogShow3: false,
    };
  },
  mounted() {
    this.role = this.$store.getters.user.roles[0].name;
    this.getData();
  },
  mixins: [openMixin],
  methods: {
    //下载模板
    downloadExcel() {
      window.open(picHost + "村庄规划质量提升工作台账示例.xlsx");
    },
    ledgerExcelUp(data) {
      this.excel.push(data.file);
    },
    ledgerPDFUp(data) {
      this.tzpdf.push(data.file);
    },
    reportUp(data) {
      this.bgpdf.push(data.file);
    },
    reset() {
      this.excel = [];
      this.tzpdf = [];
      this.bgpdf = [];
      this.mmpdf = [];
    },
    multifilesUp(data) {
      this.mmpdf.push(data.file);
    },
    zhuijiaUp(data) {
      this.zhuijiafile.push(data.file);
    },
    ledgerExcelUp1(data) {
      this.upexcel.push(data.file);
    },

    ledgerExcelUp2(data) {
      this.pdf1.push(data.file);
    },
    ledgerExcelUp3(data) {
      this.pdf2.push(data.file);
    },

    submitFiles() {
      if (this.excel.length == 0) {
        this.$notify.error({
          title: "错误",
          message: "村庄规划质量提升工作台账（excel）不能为空",
        });
        return;
      } else if (this.tzpdf.length == 0) {
        this.$notify.error({
          title: "错误",
          message: "村庄规划质量提升工作台账（pdf）不能为空",
        });
        return;
      } else if (this.bgpdf.length == 0) {
        this.$notify.error({
          title: "错误",
          message: "村庄规划质量评估报告(pdf)不能为空",
        });
        return;
      } else {
        var data = new FormData();
        data.append("year", "2023");

        data.append("excel", this.excel[0]);
        data.append("tzpdf", this.tzpdf[0]);
        data.append("bgpdf", this.bgpdf[0]);
        this.mmpdf.forEach((element) => {
          data.append("mmpdf", element);
        });
        this.isloading = true;
        apply(data)
          .then((v) => {
            if (v.success) {
              this.$notify({
                title: "成功",
                message: "上传成功",
                type: "success",
              });
              this.reset();
              this.getData();
            } else {
              this.$notify.error({
                title: "错误",
                message: v.message,
                duration: 100000,
              });
            }
            this.isloading = false;
          })
          .catch((err) => {
            this.$notify.error({
              title: "错误",
              message: err.response.data.message,
              duration: 100000,
            });
            this.isloading = false;
          });
      }
    },
    zhuijia() {
      var data = new FormData();
      data.append("year", "2023");
      this.zhuijiafile.forEach((element) => {
        data.append("mmpdf", element);
      });
      this.isloading = true;
      uploadmmpdf(data)
        .then((v) => {
          if (v.success) {
            this.$notify({
              title: "成功",
              message: "追加成功",
              type: "success",
            });
            this.isDialogShow = false;
            this.getData();
          } else {
            this.$notify.error({
              title: "错误",
              message: v.message,
            });
          }
          this.isloading = false;
        })
        .catch((err) => {
          this.$message.error(err.response.data.message);
        });
    },
    updateExcel(row) {
      this.isDialogShow1 = true;
      this.upexcel = [];
    },
    openpdf1(row) {
      this.isDialogShow2 = true;
      this.pdf1 = [];
    },
    openpdf2(row) {
      this.isDialogShow3 = true;
      this.pdf2 = [];
    },
    updatetaizhang() {
      var data = new FormData();
      data.append("year", "2023");
      this.upexcel.forEach((element) => {
        data.append("excel", element);
      });
      this.isloading = true;
      uploadexcel(data)
        .then((v) => {
          if (v.success) {
            this.$notify({
              title: "成功",
              message: "更新成功",
              type: "success",
            });
            this.isDialogShow1 = false;
            this.getData();
          } else {
            this.$notify.error({
              title: "错误",
              message: v.message,
            });
          }
          this.isloading = false;
        })
        .catch((err) => {
          this.$message.error(err.response.data.message);
        });
    },
    updatepdf1() {
      var data = new FormData();
      data.append("year", "2023");
      data.append("tzpdf", this.pdf1[0]);
      this.isloading = true;
      uploadmmpdf(data)
        .then((v) => {
          if (v.success) {
            this.$notify({
              title: "成功",
              message: "更新成功",
              type: "success",
            });
            this.isDialogShow2 = false;
            this.getData();
          } else {
            this.$notify.error({
              title: "错误",
              message: v.message,
            });
          }
          this.isloading = false;
        })
        .catch((err) => {
          this.$message.error(err.response.data.message);
        });
    },
    updatepdf2() {
      var data = new FormData();
      data.append("year", "2023");
      data.append("bgpdf", this.pdf2[0]);
      this.isloading = true;
      uploadmmpdf(data)
        .then((v) => {
          if (v.success) {
            this.$notify({
              title: "成功",
              message: "更新成功",
              type: "success",
            });
            this.isDialogShow3 = false;
            this.getData();
          } else {
            this.$notify.error({
              title: "错误",
              message: v.message,
            });
          }
          this.isloading = false;
        })
        .catch((err) => {
          this.$message.error(err.response.data.message);
        });
    },
    zhuijiaOpen(row) {
      this.isDialogShow = true;
      this.zhuijiafile = [];
    },
    async getData() {
      this.isloading = true;
      let res = await getlist(this.listquery);
      this.tableData = res.data.content;
      this.total = res.data.totalElements;
      this.isloading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.fenleicontainer {
  margin: 5px;
  padding-bottom: 10px;
  overflow-y: auto;
  position: relative;
  height: 100%;

  .button-box {
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;

    button {
      margin-right: 10px;
    }
  }
  .vm {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .header {
    line-height: 45px;
    margin-right: 5px;
    font-size: 15px;
    letter-spacing: 0.5px;
    font-weight: 600;
    color: #4778c7;

    i {
      color: #4778c7;
    }
  }
}
.uploadbtn {
  display: none;
}
</style>
